
window.onload=function () {
    var imglist = document.getElementById('imglist');
    var imgarr= document.querySelectorAll("ul[id=imglist] li img");
    var allA=document.querySelectorAll("div[id=luo-nav] a");
    var prev=document.getElementsByTagName('i')[0];
    var next=document.getElementsByTagName('i')[1];
    //左右移动添加绑定按钮
    prev.onclick=function (){
        clearInterval(timer);
        if (index <= 0) {
            index = 5;
            imglist.style.left = -1500 + "px";
            autoChange();
            setA();
        }else{
            index=index-1;
            move(imglist, "left", -300*index, 30, function () {
                autoChange();
            });
            setA();
        }
    }
    next.onclick=function () {
        clearInterval(timer);
        if (index >= imgarr.length - 2) {
            index = 0;
            imglist.style.left = 0 + "px";
            autoChange();
            setA();
        } else {
            index=index+1;
            move(imglist, "left", -300*index, 30, function () {
                autoChange();
            });
            setA();
        }


    }

    var index=0;
    var timer;
    //设置图片索引
    imglist.style.width=300*imgarr.length+"px";
    allA[index].style.backgroundColor="black";
    //移动函数，可以进行一些简单的特效
    function move(obj,attr,target,speed,callback){
        clearInterval(obj.timer);
        var current=parseInt(getComputedStyle(obj,null)[attr]);

        if(current>target){
            speed=-speed;
        }
        obj.timer=setInterval(function(){

            let oldvalue=parseInt(getComputedStyle(obj,null)[attr]);
            let newValue=oldvalue+speed;
            if((speed<0&&newValue<target) ||(speed>0&&newValue>target)){
                newValue=target;
            }
            obj.style[attr]=newValue+"px";
            if(newValue==target){
                clearInterval(obj.timer);
                callback()||callback;
            }
        },30);
    }
    //设置标签的位置
    function setA(){
        /* 先判断是否为最后一张图片，如果是最后一张图片，使他迅速切换到第一张，毫无痕迹！！ */
        if(index>=imgarr.length-1){
            index=0;
            imglist.style.left=0+"px";

        }
        /* for循环把每一个标签的背景色改回红色，但是因为我们设置了悬停效果
         是外联对象，这里设置是内联对象，如果这里写red的话就会使得内联函数掩盖外联对象，所以这里设置为空，
         因为如果为空的话，就可以使用默认的外联函数*/
        for(var i=0;i<allA.length;i++){
            allA[i].style.backgroundColor="";
        }
        /* 把选中点击的标签背景色改为黑色 */
        allA[index].style.backgroundColor="black";
    }
    // 自动播放
    function autoChange(){
        timer=setInterval(function(){
            index++;
            index%=imgarr.length;

            move(imglist,"left",-300*index,20,function(){
                setA();
            });
        },2000);
    }

    for(var i=0;i<allA.length;i++){
        /* 因为浏览器会先执行for循环所以必须设置一个变量得值
        来保存当前的i也就是你点击了哪一个 */
        //因为js会在页面加载之前就会运行完，所以直接写for循环会出错，因此设立一个值来存储
        allA[i].num=i;
        /* 给每一个标签添加绑定函数 */
        allA[i].onclick=function(){

            clearInterval(timer);
            /* 获取点击的索引，并把它设置为index */
            index=this.num;
            /* 已经写好的move函数，在tool.js中，作用是让指定对象完成对应的动画 */
            move(imglist,"left",-300*index,30,function(){
                autoChange();
            });
            /* 调用聚焦函数，使得标签可以自己移动 */
            setA();
        }
    }
    autoChange()
}
